var CustomGoogleMap = function (options) {

    var marker_rooturl = siteAbsoluteUrl + "/Apptexfiles/beta/customgooglemap/content/imgs/"
    //google map custom marker icon - .png fallback for IE11
    var is_internetExplorer11 = navigator.userAgent.toLowerCase().indexOf('trident') > -1;
    var marker_url = (is_internetExplorer11) ? marker_rooturl + 'cd-icon-location.png' : marker_rooturl + 'cd-icon-location.svg';
    var canvas = document.getElementById(options.canvasid);
    //define the basic color of your map, plus a value for saturation and brightness
    var main_color = '#2d313f',
		saturation_value = -20,
		brightness_value = 5;

    //we define here the style of the map
    var style = [
		{
		    //set saturation for the labels on the map
		    elementType: "labels",
		    stylers: [
				{ saturation: saturation_value }
		    ]
		},
	    {	//poi stands for point of interest - don't show these lables on the map 
	        featureType: "poi",
	        elementType: "labels",
	        stylers: [
				{ visibility: "off" }
	        ]
	    },
		{
		    //don't show highways lables on the map
		    featureType: 'road.highway',
		    elementType: 'labels',
		    stylers: [
	            { visibility: "off" }
		    ]
		},
		{
		    //don't show local road lables on the map
		    featureType: "road.local",
		    elementType: "labels.icon",
		    stylers: [
				{ visibility: "off" }
		    ]
		},
		{
		    //don't show arterial road lables on the map
		    featureType: "road.arterial",
		    elementType: "labels.icon",
		    stylers: [
				{ visibility: "off" }
		    ]
		},
		{
		    //don't show road lables on the map
		    featureType: "road",
		    elementType: "geometry.stroke",
		    stylers: [
				{ visibility: "off" }
		    ]
		},
		//style different elements on the map
		{
		    featureType: "transit",
		    elementType: "geometry.fill",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		},
		{
		    featureType: "poi",
		    elementType: "geometry.fill",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		},
		{
		    featureType: "poi.government",
		    elementType: "geometry.fill",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		},
		{
		    featureType: "poi.sport_complex",
		    elementType: "geometry.fill",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		},
		{
		    featureType: "poi.attraction",
		    elementType: "geometry.fill",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		},
		{
		    featureType: "poi.business",
		    elementType: "geometry.fill",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		},
		{
		    featureType: "transit",
		    elementType: "geometry.fill",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		},
		{
		    featureType: "transit.station",
		    elementType: "geometry.fill",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		},
		{
		    featureType: "landscape",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]

		},
		{
		    featureType: "road",
		    elementType: "geometry.fill",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		},
		{
		    featureType: "road.highway",
		    elementType: "geometry.fill",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		},
		{
		    featureType: "water",
		    elementType: "geometry",
		    stylers: [
				{ hue: main_color },
				{ visibility: "on" },
				{ lightness: brightness_value },
				{ saturation: saturation_value }
		    ]
		}
    ];




    //set google map options
    var map_options = {
        center: new google.maps.LatLng(options.latitude, options.longitude),
        zoom: options.map_zoom,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        streetViewControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        styles: style
    }
    //inizialize the map
    var map = new google.maps.Map(canvas.getElementsByClassName('google-container')[0], map_options);

    //add a custom marker to the map				
    setMarkers(map, options.locations);

    //add custom buttons for the zoom-in/zoom-out on the map
    function CustomZoomControl(controlDiv, map) {
        //grap the zoom elements from the DOM and insert them in the map 
        var controlUIzoomIn = canvas.getElementsByClassName('cd-zoom-in')[0],
	  		controlUIzoomOut = canvas.getElementsByClassName('cd-zoom-out')[0];
        controlDiv.appendChild(controlUIzoomIn);
        controlDiv.appendChild(controlUIzoomOut);

        // Setup the click event listeners and zoom-in or out according to the clicked element
        google.maps.event.addDomListener(controlUIzoomIn, 'click', function () {
            map.setZoom(map.getZoom() + 1)
        });
        google.maps.event.addDomListener(controlUIzoomOut, 'click', function () {
            map.setZoom(map.getZoom() - 1)
        });
    }

    var zoomControlDiv = document.createElement('div');
    var zoomControl = new CustomZoomControl(zoomControlDiv, map);

    //insert the zoom div on the top left of the map
    map.controls[google.maps.ControlPosition.LEFT_TOP].push(zoomControlDiv);

    function setMarkers(map, locations) {

        var marker, i

        for (i = 0; i < locations.length; i++) {

            var latlngset = new google.maps.LatLng(locations[i]["Latitude"], locations[i]["Longitude"]);

            var marker = new google.maps.Marker({
                map: map,
                title: locations[i]["Title"],
                position: latlngset,
                visible: true,
                icon: marker_url
            });

            map.setCenter(marker.getPosition())


            var contentString = '<div id="content">' +
                                     '<div id="siteNotice">' +
                                     '</div>' +
                                     '<h1 id="firstHeading" class="firstHeading">' + locations[i]["Title"] + '</h1>' +
                                     '<div id="bodyContent">' +
                                         locations[i]["Description"] +
                                     '</div>' +
                               '</div>';

            var infowindow = new google.maps.InfoWindow()

            google.maps.event.addListener(marker, 'click', (function (marker, contentString, infowindow) {
                return function () {
                    infowindow.setContent(contentString);
                    infowindow.open(map, marker);
                };
            })(marker, contentString, infowindow));

        }
    }
}
